<template>
  <div class="forget-password">
    <cell-group>
      <field
        v-model="phone"
        center
        type="number"
        label-width="100px"
        clearable
        label="手机号码："
        placeholder="请输入手机号"
      />
      <field
        v-model="code"
        center
        clearable
        type="number"
        label-width="100px"
        label="短信验证码："
        placeholder="请输入短信验证码"
      >
        <van-button
          slot="button"
          size="small"
          label-width="100px"
          type="primary"
          @click="sendSMS(phone)"
        >{{sendsms ? "已发送"+sendsmstext+"秒" : sendsmstext}}</van-button>
      </field>

      <field
        v-model="password"
        center
        clearable
        label-width="100px"
        label="新密码："
        placeholder="请输入新密码"
        type="password"
      />
      <field
        v-model="repassword"
        center
        clearable
        label-width="100px"
        label="密码确认："
        placeholder="请输入重复密码确认"
        type="password"
      />
    </cell-group>

    <div class="submit">
      <van-button type="info" size="large" @click="submit"  :disabled="isSubmitting">{{isSubmitting ? '正在提交' : '确认'}}</van-button>
    </div>
  </div>
</template>

<script>
import { Cell, CellGroup, Field, Button, Toast } from "vant";
import { createNamespacedHelpers } from "vuex";
import http from "../service/myHttp.js";
import urls from "../service/url.js";
import sendSMS from "../mixins/send_sms.js";
const md5 = require("js-md5");

export default {
  components: {
    Cell,
    CellGroup,
    Field,
    vanButton: Button
  },
  mixins: [sendSMS],
  data() {
    return {
      phone: "",
      code: "",
      password: "",
      repassword: "",
      isSubmitting: false
    };
  },
  mounted() {
    this.sendType = 'forgetPwd'
    // console.log(this.sendsmstext)
  },
  methods: {
    // 提交信息
    submit() {
      if (!this.phone) {
        Toast("手机号不能为空");
        return false;
      }
      if (!this.code) {
        Toast("验证码不能为空");
        return false;
      }
      if (!this.password || !this.repassword) {
        Toast("密码不能为空");
        return false;
      } else if (this.password != this.repassword) {
        Toast("两次密码输入不一样");
        return false;
      }

      this.isSubmitting = true
      http
        .post(urls.FORGET, {
          phone: this.phone,
          password: md5(this.password),
          code: this.code,
        })
        .then(res => {
          this.isSubmitting = false

          if (res.data.code == 200) {
            Toast.success("修改密码成功");
            this.$router.replace({
              path: "/login"
            });
          }
        });
    }
  }
};
</script>